<template>
  <div>
    <el-button style="margin-right: 20px; margin-bottom: 20px" @click="goBack"
      >返 回</el-button
    >
    <!--start --111s-->
    <el-form>
      <el-form-item style="background: #e1e1e1">
        <span style="color: #3a3a3a; margin-left: 10px">订单信息</span>
      </el-form-item>
      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <div v-if="detaildata.purchasetype === 1">
          <span style="color: #3a3a3a; margin-left: 20px">积分支付</span>
        </div>
        <div v-if="detaildata.purchasetype === 0">
          <span style="color: #3a3a3a; margin-left: 20px">余额支付</span>
        </div>
      </el-form-item>
      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="创建时间："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span style="color: #3a3a3a" v-if="detaildata.createtime != null">{{
            detaildata.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss')
          }}</span>
        </el-form-item>
        <el-form-item
          label="付款时间："
          style="margin-left: 80px; width: 30%; display: inline-block"
        >
          <i class="el-icon-time" v-if="detaildata.paytime != null"></i>
          <span style="color: #3a3a3a" v-if="detaildata.paytime != null">{{
            detaildata.paytime | formatDateStr('yyyy-MM-dd hh:mm:ss')
          }}</span>
        </el-form-item>
      </el-form-item>

      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="发货时间："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <div v-if="detaildata.delivergoodstime != null">
            <span style="color: #3a3a3a">{{
              detaildata.delivergoodstime | formatDateStr('yyyy-MM-dd hh:mm:ss')
            }}</span>
          </div>
          <div v-else>
            <span>无</span>
          </div>
        </el-form-item>
        <el-form-item
          label="完成时间："
          style="margin-left: 80px; width: 30%; display: inline-block"
        >
          <div v-if="detaildata.completiontime != null">
            <span style="color: #3a3a3a">{{
              detaildata.completiontime | formatDateStr('yyyy-MM-dd hh:mm:ss')
            }}</span>
          </div>
          <div v-else>
            <span>无</span>
          </div>
        </el-form-item>
      </el-form-item>

      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="订单编号："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span style="color: #3a3a3a"> {{ detaildata.ordernumber }}</span>
        </el-form-item>
        <el-form-item
          label="订单状态："
          style="margin-left: 80px; width: 30%; display: inline-block"
        >
          <div v-if="detaildata.orderstatus === 0">
            <span style="color: #3a3a3a">待付款</span>
          </div>
          <div v-if="detaildata.orderstatus === 1">
            <span style="color: #3a3a3a">待发货</span>
          </div>
          <div v-if="detaildata.orderstatus === 2">
            <span style="color: #3a3a3a"> 待收货</span>
          </div>
          <div v-if="detaildata.orderstatus === 3">
            <span style="color: #3a3a3a">已完成</span>
          </div>
          <div v-if="detaildata.orderstatus === 4">
            <span style="color: #3a3a3a">已关闭</span>
          </div>
          <div v-if="detaildata.orderstatus === 5">
            <span style="color: #3a3a3a">已取消</span>
          </div>
        </el-form-item>
      </el-form-item>
      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="运费（元）："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span style="color: #3a3a3a">{{ detaildata.postage }}</span>
        </el-form-item>
        <el-form-item
          v-if="detaildata.orderstatus !== 6"
          label="实付金额（元）："
          style="margin-left: 80px; width: 50%; display: inline-block"
        >
          <div>
            <span style="color: #3a3a3a">{{ detaildata.orderprice }}</span>
          </div>
        </el-form-item>
      </el-form-item>

      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="快递："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span v-if="detaildata.orderstatus > 1" style="color: #3a3a3a">{{
            detaildata.expressname
          }}</span>
          <span v-else>无</span>
        </el-form-item>
        <el-form-item
          label="物流信息："
          style="margin-left: 80px; width: 50%; display: inline-block"
        >
          <span v-if="detaildata.orderstatus === 0">无</span>
          <span v-else
            ><el-button
              type="primary"
              size="mini"
              @click.native="handleForm(detaildata)"
              >查看</el-button
            ></span
          >
        </el-form-item>
      </el-form-item>

      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="发货："
          style="width: 50%; display: inline-block; margin-left: 20px"
        >
          <div v-if="detaildata.orderstatus === 0">
            <span style="color: #3a3a3a">待付款</span>
          </div>
          <div v-if="detaildata.orderstatus === 1">
            <el-button
              type="primary"
              size="mini"
              @click.native="showSend(detaildata.orderid)"
              >发货</el-button
            >
          </div>
          <div v-if="detaildata.orderstatus === 2">
            <span style="color: #3a3a3a"> 待收货</span>
          </div>
          <div v-if="detaildata.orderstatus === 3">
            <span style="color: #3a3a3a">已完成</span>
          </div>
          <div v-if="detaildata.orderstatus === 4">
            <span style="color: #3a3a3a">已关闭</span>
          </div>
          <div v-if="detaildata.orderstatus === 5">
            <span style="color: #3a3a3a">已取消</span>
          </div>
        </el-form-item>
      </el-form-item>
    </el-form>

    <!--列表start --222s-->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="detaildata.vipOrderDetails"
      :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
      border
    >
      <el-table-column
        label="商品ID"
        prop="commodityid"
        width="70"
        align="center"
      />
      <el-table-column
        label="图片"
        prop="commodityicon"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.commodityicon"
            placement="right"
            trigger="hover"
          >
            <img
              :src="scope.row.commodityicon"
              style="width: 400px; border-radius: 3px"
            />
            <img
              slot="reference"
              :src="scope.row.commodityicon"
              style="max-height: 80px; max-width: 50px; border-radius: 5px"
            />
          </el-popover>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="commodityname" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.commodityname != null"
            >{{ scope.row.commodityname }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        label="零售价"
        prop="commodityoldprice"
        width="200"
        align="center"
      />
      <el-table-column
        label="数量"
        prop="purchasenum"
        width="200"
        align="center"
      />
      <el-table-column
        label="合计（元）"
        prop="transactionprice"
        width="200"
        align="center"
      />
      <!-- <el-table-column label="物流信息" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.secondorderstatus!==0">
                        <el-button type="primary" size="mini" @click.native="handleForm(scope.$index,scope.row)">查看
                        </el-button>
                    </div>

                </template>
            </el-table-column> -->
    </el-table>
    <!--卖家-->
    <el-form style="margin-top: 15px">
      <el-form-item style="background: #e1e1e1">
        <span style="color: #3a3a3a; margin-left: 10px">买家信息</span>
      </el-form-item>
      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="用户昵称："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span v-if="detaildata.usernick != null" style="color: #3a3a3a">{{
            detaildata.usernick
          }}</span>
          <span v-else> -- </span>
        </el-form-item>
        <el-form-item
          label="取货方式："
          style="margin-left: 80px; width: 30%; display: inline-block"
        >
          <div v-if="detaildata.pickuptype == 0">
            <span style="color: #3a3a3a">商家配送</span>
          </div>
          <div v-if="detaildata.pickuptype == 1">
            <span style="color: #3a3a3a"> 商家配送</span>
          </div>
        </el-form-item>
      </el-form-item>
      <el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
        <el-form-item
          label="收货人："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <span style="color: #3a3a3a">{{ detaildata.useraddressname }}</span>
        </el-form-item>
        <el-form-item
          label="联系方式："
          style="margin-left: 80px; width: 30%; display: inline-block"
        >
          <span style="color: #3a3a3a">{{ detaildata.useraddressphone }}</span>
        </el-form-item>
      </el-form-item>

      <el-form-item>
        <el-form-item
          label="收货地址："
          style="width: 30%; display: inline-block; margin-left: 20px"
        >
          <div v-if="detaildata.province">
            <span style="color: #3a3a3a">{{
              detaildata.province +
              ' ' +
              detaildata.city +
              ' ' +
              detaildata.area +
              ' ' +
              detaildata.useraddress
            }}</span>
          </div>
          <div v-else>
            <span style="color: #3a3a3a">{{ detaildata.useraddress }}</span>
          </div>
        </el-form-item>
      </el-form-item>
      <!-- <el-form-item>
                <el-form-item label="买家留言：" style="width:30%;display: inline-block;">
                    <span style="color: #3A3A3A">{{detaildata.buyermessage}}</span>
                </el-form-item>
            </el-form-item> -->
    </el-form>
    <!--评论-->

    <el-dialog
      title="物流信息"
      :visible.sync="dialoglook"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form label-width="100px" style="margin-left: 50px">
        <!-- <img src="trailUrl" alt="地图展示有问题，请稍后重试"> -->
        <div v-if="logisticsdata.status == 200">
          <div style="margin-bottom: 20px">
            <div>
              <span style="font-size: 16px; font-weight: bold">承运快递:</span>
              <span style="display: inline-block; margin-left: 20px">{{
                logisticsdata.comname
              }}</span>
            </div>
            <div style="margin-top: 10px">
              <span style="font-size: 16px; font-weight: bold">快递单号:</span>
              <span style="display: inline-block; margin-left: 20px">{{
                logisticsdata.nu
              }}</span>
            </div>
          </div>

          <!--列表start --222s-->
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="logisticsdata.data"
            :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
            :row-class-name="tableRowClassName"
            border
          >
            <el-table-column
              label="状态"
              prop="status"
              width="70"
              align="center"
            >
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.status }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="时间"
              prop="time"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="物流信息" prop="context"></el-table-column>
          </el-table>
        </div>
        <div v-if="logisticsdata.Success === false">
          <ul>
            <li>
              <span>{{ logisticsdata.Reason }}</span>
            </li>
          </ul>
        </div>
        <div v-if="logisticsdata.status == null">
          <ul>
                                   
            <li>
                                          <span
                style="
                  color: red;
                  font-size: 16px;
                  font-weight: bold;
                  margin-left: 20px;
                "
                > 1.请核对物流单号</span
              >
                                      
            </li>
                                    
            <li>
                                          <span
                style="
                  color: red;
                  font-size: 16px;
                  font-weight: bold;
                  margin-left: 20px;
                "
                >2.{{ logisticsdata.message }}</span
              >
                                      
            </li>
                                
          </ul>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoglook = false">返回</el-button>
      </span>
    </el-dialog>
    <!--快递-->
    <el-dialog
      title="物流信息"
      :visible.sync="dialogSend"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form label-width="100px" style="margin-left: 50px" size="small">
        <el-form-item
          class="query-form-item"
          label="快递单号"
          :rules="[{ required: true }]"
        >
          <el-input
            v-model="expressnumber"
            placeholder="请输入快递单号"
            prefix-icon="el-icon-search"
            @keyup.enter.native="searchcompany"
            clearable
          ></el-input>
        </el-form-item>

        <div>
          <!--查询条件start --111s-->
          <el-form
            :inline="true"
            class="query-form"
            size="small"
            @submit.native.prevent
          >
            <el-form-item class="query-form-item" label="快递公司名称">
              <el-input
                v-model="query.company"
                placeholder="请输入快递公司"
                prefix-icon="el-icon-search"
                @keyup.enter.native="searchcompany"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="oncompanyRest"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchcompany"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <!--查询条件end-->

          <!--列表start --222s-->
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="expresscompanylist"
            :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
            @selection-change="handleSelectionChange"
            border
          >
            <el-table-column type="selection" width="50" fixed />
            <el-table-column
              label="快递公司编码ID"
              prop="code"
              width="200"
              align="center"
            />
            <el-table-column label="快递公司" prop="company" align="center" />
          </el-table>
          <!--列表end --222e-->

          <!--分页模块start-->
          <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
          ></el-pagination>
          <!--分页模块end-->

          <!---->
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" @click="submityinfo()"
          >提交</el-button
        >
        <el-button @click="back" size="small">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCommodityVipOrderDetail,
  getlogistics,
  getLogisticsCompany,
  updateOrderSaleStatus,
} from '../../api/statistics/statistics.js'
import Tinymce from '../../components/Tinymce/index.vue'
/*用作表单的数据初始化*/
const formJson = {
  commodityid: '', //商品id
}
const Json = {
  orderrealprice: '', //商品id
}
export default {
  components: {
    Tinymce,
  },
  data() {
    return {
      orderid: '', //订单id
      formData: formJson, //新增或修改的对象
      fjson: Json, //
      formSumbitLoding: false, //提交
      orderrealprice: '', //支付价格
      createTime: [], //选择日期时需要的model
      sendtime: '',
      taketime: '',
      detaildata: {}, //详细
      logisticsdata: {}, //快递信息
      dialoglook: false, //物流
      dialogSend: false, //发货
      formVisible: false, //添加编辑显示
      loading: false, //列表加载
      formLoading: false, //表单提交加载

      expresscompanylist: [], //快递公司列表
      secondorderid: '', //二级订单号码
      expressnumber: '', //物流单号
      company: '', //快递公司
      totalNumber: 0, //分页总页数
      query: {
        //查询条件
        company: '',
        currentPage: 1,
        pageSize: 10,
      },

      multipleSelection: [], //多选集合
      rules: {
        //表单校验
        orderrealprice: {
          required: true,
          message: '请输入价格',
          trigger: 'blur',
        },
      },
    }
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(row)
      console.log(rowIndex)
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      } else if (rowIndex === 10) {
        return 'success-row'
      }
      return ''
    },
    back() {
      this.oncompanyRest()
      this.dialogSend = false
    },
    goBack() {
      this.$router.push({
        path: '/merchantOrder/retailOrder', //返回分销零售订单
      })
    },
    oncompanyRest() {
      this.query = {
        company: '',
        currentPage: 1,
        pageSize: 10,
      }
      this.getinfo()
    },

    searchcompany() {
      this.query.currentPage = 1
      this.getinfo()
    },
    /*列表复选框选择事件*/
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val == '') {
        this.cancelToggle = false
        return
      }
      this.cancelToggle = true
    },
    /*全选删除事件*/
    submityinfo() {
      console.log(JSON.stringify(this.multipleSelection))

      if (this.multipleSelection.length > 1) {
        this.$message({
          message: '请先选择一个快递',
          type: 'warning',
        })
        return
      }
      var expresscode = this.multipleSelection.map((item) => item.code).join() //获取所有选中行的id组成的字符串，以逗号分隔
      var expressname = this.multipleSelection
        .map((item) => item.company)
        .join() //获取所有选中行的id组成的字符串，以逗号分隔
      if (expresscode == '') {
        this.$message({
          message: '请先选择一个快递',
          type: 'warning',
        })
        return
      }
      if (this.expressnumber == '') {
        this.$message({
          message: '请输入订单编号',
          type: 'warning',
        })
        return
      }
      if (this.expressnumber.length < 5) {
        this.$message({
          message: '请输入订单编号长度不能小于5位数',
          type: 'warning',
        })
        return
      }
      this.updateinfo(
        this.orderid,
        this.expressnumber,
        expresscode,
        expressname
      )
    },
    //更新订单状态
    updateinfo(orderid, expressnumber, expresscode, expressname) {
      var params = new URLSearchParams()
      params.append('orderid', orderid)
      params.append('expressname', expressname)
      params.append('expresscode', expresscode)
      params.append('expressnumber', expressnumber)
      console.info(params)
      updateOrderSaleStatus(params)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message)
            this.dialogSend = false
            return
          }
          this.$message.success('发货成功') //+response.message
          this.dialogSend = false
          this.getList()
          setTimeout(() => {
            this.loading = false
            this.dialogSend = false
          }, 0.3 * 1000)
        })
        .catch(() => {
          this.dialogSend = false
          this.totalNumber = 0
        })
    },

    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getinfo()
    },

    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },

    //查看物流
    handleForm(row) {
      if (row.expresscode == undefined || row.expresscode == null) {
        this.$message.warning('没有物流单号')
        return
      }
      if (row.expressnumber == undefined || row.expressnumber == null) {
        this.$message.warning('没有物流单号')
        return
      }
      let data = {
        com: row.expresscode,
        num: row.expressnumber,
        to: row.cityName,
      }

      getlogistics(data)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message)
            return
          }
          // console.log(response.data)
          let expressname = {}
          expressname.comname = row.expressname
          this.logisticsdata = Object.assign({}, expressname, response.data)
          console.log(this.logisticsdata)
          this.trailUrl = response.data.trailUrl
        })
        .catch(() => {})
      this.dialoglook = true
    },
    //显示发货列表
    showSend(row) {
      this.dialogSend = true
      this.orderid = row
      this.getinfo()
    },
    getinfo() {
      this.loading = true
      var params = new URLSearchParams(this.query)
      getLogisticsCompany(params)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message)
            this.loading = false
            return false
          }
          this.loading = false
          this.expresscompanylist = response.data.list
          this.totalNumber = response.data.totalNumber || 0
          // if (response.data.sdlist != null) {
          //     this.sendtime = (response.data.sdlist[0].taketime);
          //     this.taketime = (response.data.sdlist[0].sendtime);
          // }
        })
        .catch(() => {
          this.loading = false
          this.expresscompanylist = []
        })
    },

    //发货
    handleSend(index, row) {
      this.loading = true
      var params = new URLSearchParams()
      params.append('expresscode', row.expresscode)
      params.append('expressname', row.expressnumber)
      params.append('secondorderid', row.expressnumber)
      params.append('expressnumber', row.expressnumber)
      console.info(params)
      getlogistics(params)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message)
            this.loading = false
            return
          }
          this.logisticsdata = JSON.parse(response.data)
        })
        .catch(() => {})
    },

    //显示 查看弹框

    detailForm(index, row) {
      if (row !== null) {
        this.detailVisible = true
        this.formData = Object.assign({}, row)
        this.formName = 'detail'
      }
    },

    // 隐藏详情弹框
    hideDetailForm() {
      // 更改值
      this.detailVisible = !this.detailVisible
      return true
    },

    /*获取列表事件*/
    getList() {
      this.loading = true

      var params = new URLSearchParams()
      params.append('orderid', this.orderid)
      getCommodityVipOrderDetail(params)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message)
            this.loading = false
            return false
          }
          let dataDetail = response.data || {}
          let user = response.data.user || {}
          this.detaildata = Object.assign({}, dataDetail, user)
          console.log(this.detaildata)
          // if (response.data!=null&&response.data.sdlist != null) {
          //     this.sendtime = (response.data.sdlist[0].taketime);
          //     this.taketime = (response.data.sdlist[0].sendtime);
          // }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.list = []
        })
    },

    /*刷新*/
    onRest() {
      this.$router.push({
        path: '',
      })
      //刷新事件需要重置查询条件
      this.createTime = []
      this.query = {
        currentPage: 1,
        pageSize: 10,
      }
      this.getList()
    },
  },

  mounted() {
    this.orderid = this.$route.query.orderid
  },
  created() {
    this.orderid = this.$route.query.orderid
    this.getList()
  },
}
</script>
<style type="text/css">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
